<template>
  <div>
    <div>ChildB 组件</div>
    <div>
      count: {{ $store.state.count }}
      <br />
      mapState - count: {{ count }}
      <button @click="$store.commit('addCount', 1)">+1</button>
      <button @click="onClick2">一秒后+1</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

// 传一个数组进去，表示要映射的状态列表
// 这个函数的返回值为一个对象，格式形如：
/*
{
  // {{ count }}
  count() {
    return this.$store.state.count
  }, 
  // {{ name }}
  name() {
    return this.$store.state.name
  }
}
*/
// const obj = mapState(['count',  'name'])

export default {
  name: 'ChildB', // 养成好习惯，给每个组件取个名字
  // 补充说明：为什么 mapState 和 mapGetters 不能往 组件的 data 中放呢？
  //   因为 Vuex 中的状态 只能由 Vuex 的 mutation 来改，getters 本身就是计算属性，不能直接修改
  // data() {
  //   return {}
  // },
  computed: {
    // mapState 状态（state） 和 mapGetters 计算属性（getters），都往 computed 中放
    ...mapState(['count', 'name']),
    // myComputed1() {},
    // myComputed2() {},
  },
  methods: {
    /*
    {
      addCount(payload) {
        this.$store.dispatch('addCount', payload)
      }
    }
    */
    ...mapActions(['addCount']),
    // mapMutations 和 mapActions 都往 methods 里面放
    onClick2() {
      // this.$store.dispatch('addCount', 1)
      this.addCount(1)
    },
  },

  // 辅助函数：mapState、mapGetters、mapMutations、mapActions
  //   这些辅助函数仅仅只是用来简化咱们在组件中 对于 Vuex 的访问和调用代码，没有新的知识点
  //    不建议使用，缺点大于优点，缺点：
  //    1. 会污染组件本身的计算属性和方法（可能会存在同名的计算属性和方法，导致命名冲突）
  //    2. 但是JS的前置准备比较麻烦，增加记忆负担
  //    3.（致命缺点）不能在 js 模块中使用，只能在 vue 组件中使用，为什么？因为要往 computed 和 methods 上挂载的
  //    4. 其他框架（React、Angular、小程序）的全局状态管理库，没有这个辅助函数的概念，用的还是传统的方式，意味着传统的方式更通用，Vue辅助函数的方式仅限于Vue
}
</script>

<style></style>
